<script>
import ApiItem from "../formItem/ApiItem.vue";
import _ from "loadsh";
export default {
  name: "autoForm",
  components: { ApiItem },
  props: {
    msg: String,
    config: Object,
    data: Object,
  },
  data() {
    return {
      form: {},
    };
  },
  methods: {
    submit() {
      // console.log(this.form);
      this.$set(this, "form", { ...this.form });
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log(this.form, "----");
          if (this.config.okFuc) this.config.okFuc(this.form);
          this.$emit("submitForm", this.form);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    cancel() {
      const obj = _.cloneDeep(this.form);
      for (const key in obj) {
        obj[key] = null;
      }
      this.$set(this, "form", obj);
      // this.$refs.form.resetFields();
      if (this.config.cancelFuc) this.config.cancelFuc();
      this.$emit("submitCancel");
    },
  },
  watch: {
    data: {
      handler(val) {
        if (val) {
          // for (const key in val) {
          //   this.from[key] = val[key];
          // }
          this.$set(this, "form", { ...this.from, ...val });
        }
      },
      deep: true,
      immediate: true,
    },
    // 将改变传出去方便控制整个表单
    form: {
      handler(val) {
        this.$emit("formChange", val);
      },
      deep: true,
      immediate: true,
    },
  },
  beforeCreate() {
    // 初始化form属性
    // if (this.data) this.form = { ...this.data };
    this.config.item.forEach((e) => {
      if (this.form[e.key] === undefined) this.form[e.key] = undefined;
      this.$set(this, "form", { ...this.from });
    });
  },
  mounted() {
    // 计算form-item的宽度 item.width > config.layout
    this.config.item.forEach((e) => {
      if (!e.style) e.style = {};
      e.style.width = e.style.width
        ? e.style.width
        : this.config.layout === "vertical"
        ? "100%"
        : "";
    });

    // 如果没有规则就生成默认规则
    this.config.item.forEach((e) => {
      if (e.require && !e.rule) {
        e.rule = {
          required: true,
          message: `${e.type === "input" ? "请输入" : "请选择"}${e.label}`,
          trigger: "blur",
        };
      }
    });
    this.$set(this.config, "item", [...this.config.item]);
  },
  render() {
    return (
      <div
        class={["form-layout-horizontal", "form-layout"]}
        style={this.config.layoutStyle}
      >
        <el-form
          ref="form"
          label-width="120px"
          props={{
            model: this.form,
            ...this.config.global,
          }}
        >
          <div class="container" style={this.config.itemStyle}>
            {this.config?.item?.map((e) =>
              e?.show === false ? (
                ""
              ) : (
                <div style={{ ...e.style }}>
                  <el-form-item label={e.label} rules={e?.rule} prop={e.key}>
                    <ApiItem vModel={this.form[e.key]} config={e} />
                  </el-form-item>
                </div>
              )
            )}
            <el-form-item>
              <el-button type="primary" size="small" onClick={this.submit}>
                {this.config?.okTxt ? this.config?.okTxt : "提交"}
              </el-button>
              <el-button size="small" onClick={this.cancel}>
                {this.config?.cancelTxt ? this.config?.cancelTxt : "取消"}
              </el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    );
  },
};
</script>

<style scoped>
@import url(./index.scss);
</style>

<style scoped>
.form-layout-horizontal {
  .el-form-item__content > div {
    width: 100% !important;
  }
}
</style>
